<template>
  <div ref="chart" style="height: 100%;" />
</template>
<script>
import { Chart } from '@antv/g2';
export default {
  name: 'LongBarChart2',
  props: {
    data: { type: Array, required: true },
    x: { type: String, default: 'x' },
    y: { type: String, default: 'y' },
    s: { type: String, default: 's' },
    color: { type: Array, required: true },
    xAxis: { type: Boolean, default: false }
  },
  data() {
    return {
      chart: null
    };
  },
  watch: {
    data: {
      handler() {
        this.updateData();
      },
      deep: true
    }
  },
  mounted() {
    this.initChart();
    this.drawChart();
  },
  methods: {
    initChart() {
      const ref = this.$refs.chart;
      const ratio = window.ratio || 1;
      this.chart = new Chart({
        container: ref,
        width: ref.clientWidth,
        height: ref.clientHeight,
        appendPadding: [0, 0, 0, 33 * ratio]
      });
    },
    drawChart() {
      const ref = this.$refs.chart;
      const ratio = window.ratio || 1;
      const x = this.x;
      const y = this.y;
      // const s = this.s;
      this.chart.data(this.data);
      this.chart.scale(y, {
        max: 30
      });
      this.chart.tooltip({
        showMarkers: false,
        customItems: items => {
          items.forEach((item, idx) => {
            item.name = this.text[idx];
          });
          return items;
        },
        domStyles: {
          'g2-tooltip': {
            lineHeight: '.75rem',
            padding: ' 0 .75rem',
            borderRadius: '.1875rem',
            boxShadow: 'rgba(174,174,174) 0 0 0.625rem'
          },
          'g2-tooltip-title': {
            marginTop: '.75rem',
            marginBottom: '.75rem',
            fontSize: '.875rem',
            color: '#8D8D8D'
          },
          'g2-tooltip-list-item': {
            margin: '.75rem, 0',
            fontSize: 0,
            overflow: 'hidden'
          },
          'g2-tooltip-marker': {
            width: '.5rem',
            height: '.5rem',
            marginRight: '.5rem'
          },
          'g2-tooltip-name': {
            fontSize: '.75rem',
            color: '#8D8D8D'
          },
          'g2-tooltip-value': {
            marginLeft: '1.875rem',
            fontSize: '.75rem',
            color: 'rgba(0, 0, 0, 0.6)',
            fontWeight: '780'
          }
        }
      });
      const obj = this.xAxis ? { offset: 5 * ratio, style: { fontSize: 12 * ratio, fill: '#d8d8d8' }} : null;
      // x轴
      this.chart.axis(x, {
        line: null,
        tickLine: null,
        label: obj
      });
      // y轴
      this.chart.axis(y, {
        label: null,
        grid: null
      });
      this.chart.legend(false);
      // 单位标注
      this.chart.annotation().text({
        content: '',
        position: ['start', 'start'],
        style: {
          fill: '#D8D8D8',
          fontSize: 12 * ratio,
          fontFamily: 'Helvetica-regular'
        },
        background: {
          padding: 2 * ratio
        },
        offsetY: -ref.clientHeight + 24 * ratio,
        offsetX: -33 * ratio
      });
      this.chart
        .interval()
        .position(`${x}*${y}`)
        .color('color', val => {
          return String(val) === 'color' ? this.color[0] : val;
        })
        .animate({
          appear: {
            animation: 'scale-in-y',
            delay: 0,
            duration: 2000
          }
        });
      this.chart.render();
    },
    // 数据更新
    updateData() {
      this.chart.changeData(this.data);
    }
  }
};
</script>
